import { useState } from 'react';
import { Button } from 'antd';

// props 使用 父组件传递属性给子组件
function Father() {
  const [number, setNumber] = useState(0);
  return (
    <div className="parent">
      <div>father: {number}</div>
      <Child setNumber={setNumber} number={number} />
    </div>
  );
}

interface ChildProps {
  number: number;
  setNumber: React.Dispatch<React.SetStateAction<number>>;
}

function Child(props: ChildProps) {
  const { setNumber, number } = props;
  const handleClick = () => {
    setNumber(number + 10);
  };
  return (
    <div className="child">
      <p>child: {number}</p>
      <Button type="primary" onClick={handleClick}>
        change
      </Button>
    </div>
  );
}

export default Father;
